<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: calc(100vh);
			background-image: url(img/backgroud_img.jpg);
			background-size: cover;
			background-repeat: no-repeat;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
	<script type="text/javascript" src="js/layui/layui.all.js"></script>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<body >
		<div class="layui-container">
			<div  class="layui-row">
				<div class="layui-col-md6 layui-col-lg-offset3" style="margin-top: 20px;">
					<!-- 标题 -->
					<div class="layui-input-block">
						 <div class="title" style="font-size: 2em;text-align: center;"><img src="img/logo.png" >家庭医生签约平台</div>
					</div>	
				</div>
				<div class="layui-col-md6 layui-col-lg-offset3" style="margin-top: 20px;">
					<div class="layui-form">
						<form  action="" method="" class="layui-form ">
							<!-- 电话 -->
							<div class="layui-form-item" style="">
								<label class="layui-form-label">电话：</label>
								<div class="layui-input-block">
									<input type="tel" name="phone" class="layui-input" lay-verify="required|phone" lay-reqtext="电话号码不能空" placeholder="请输入电话" autocomplete="off" id="" value="" />
								</div>
							</div>
							<!-- 姓名 -->
							<div class="layui-form-item" style="">
								<label class="layui-form-label">姓名：</label>
								<div class="layui-input-block">
									<input type="text" name="name" class="layui-input" lay-verify="required|name" lay-reqtext="电话号码不能空" placeholder="请输入姓名" autocomplete="off"  />
								</div>
							</div>
							<!-- 身份证 -->
							<div class="layui-form-item" style="">
								<label class="layui-form-label">身份证：</label>
								<div class="layui-input-block">
									<input type="text" name="Doc_id" class="layui-input" lay-verify="required|identity" placeholder="请输入身份证"  />
								</div>
							</div>
							<!-- 邮箱 -->
							<div class="layui-form-item" style="">
								<label class="layui-form-label">邮箱：</label>
								<div class="layui-input-block">
									<input type="email" name="email" class="layui-input" lay-verify="required|email" placeholder="请输入电子邮箱"  />
								</div>
							</div>
							<!-- 密码 -->
							<div class="layui-form-item" style="">
								<label class="layui-form-label">密码：</label>
								<div class="layui-input-block">
									<input type="password" name="password" class="layui-input" lay-verify="required|password" lay-reqtext="密码不能空" placeholder="请输入密码" autocomplete="off" id="pass1"  />
								</div>
							</div>
							<!-- 确认密码 -->
							<div class="layui-form-item" style="">
								<label class="layui-form-label">确认密码：</label>
								<div class="layui-input-block">
									<input type="password" name="password2" class="layui-input" lay-verify="required|password2" lay-reqtext="密码不能空" placeholder="请再次输入密码" autocomplete="off" id="pass2"  />
								</div>
							</div>
							<!-- 职责 -->
							<div class="layui-form" style="">
								<label class="layui-form-label">职责：</label>
								<div class="layui-input-block">
									<select name="work" lay-filter="work">
											<option value="Ordinary_Doc" >医疗人员</option> 
											<option value="Team_manager_Doc">团队管理员</option>
									</select>
								</div>
							</div>
							<!-- 用户协议 -->
							<div class="layui-form-item layui-col-lg-offset3" style="margin-left: 0px;cursor: pointer;">
								<input type="checkbox" lay-skin="primary" name="protocol"  checked="checked"/>
								<a class="layui-form-label"  id="protocol" style="color: red;">用户协议</a>
							</div>
							<!-- submit -->
							<div class="layui-form-item" style="">
								<div class="layui-input-block">
									<input type="submit" lay-submit lay-filter="submit_button"  class="layui-btn"  style="width: 100% ;background-color: #75c5dc;" value="注册"/>
								</div>
							</div>
						</form>
					</div>

					<div class="layui-col-md6 layui-col-lg-offset4" style="margin-top: 0px;">
						<a href="login.html"><i class="layui-icon layui-icon-left"></i>返回登录</a>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			layui.use(['layer', 'form', 'element'],function(){
				//加载layui表单元素
				var form = layui.form,
					layer = layui.layer,
					element = layui.element; 
				form.render();
				
				form.verify({
				    // phone:[/(^$)|^1\d{10}$/,'请输入正确的手机号'],
					password: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],
					password2 : function(value){
						var pass2_value = $("#pass1").val();
						if(pass2_value != value){
							return '两次密码不正确'
						}
					},
					// Doc_id:[/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,'身份证出现错误'],
					// email:[/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)/,'邮箱错误！！']
					
				});
				
				// 事件绑定
				$(document).on("click","#protocol",function(){
					layer.open({
						type: 2,
						title:'用户协议',
						content:"static/protocol.txt",
					});
				});
				
				form.on("submit(submit_button)", function (data) {
					var k = JSON.stringify({
							phone:data.field.phone,//电话
							u_id:data.field.Doc_id,//身份证
							email:data.field.email,//电子邮箱
							password:hex_md5(data.field.password2),//密码
							name:data.field.name,//姓名
							identify:'doctor',//身份标识
							work : data.field.work,//工作角色
						});
					 $.ajax({   
										url:'http://123.56.67.48:8080/register',       
										method:'POST',
										contentType:'application/json',
										data:k,
		                success:function(res){
											var k = JSON.parse(res)
											if(k.code == 1){
												layer.msg("注册成功");
												window.location.href = 'login.html' 
											} else {
												alert(k.msg);
											}
										},              
										error:function (res) {
											console.log("失败"); 
										}           
						}) ;   
					return false;				
				});
			});
		</script>
	</body>
</html>
